<template>
    <div
        style="background:#fff;display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;color:#666"
    >
        <div style="width:100%">
            <span
                style="    font-size: 20px;
    margin: 30px 40px;
    display: inline-block;
      color:#000
"
            >
                <i class="el-icon-document"></i>转赠详情
            </span>
            <el-button
                @click="goback()"
                size="mini"
                round
                style="margin-left: 1000px;"
                type="primary"
            >返回</el-button>
            <el-row :gutter="20">
                <el-col :span="6" :push="1">
                    <div class="grid-content bg-purple">
                        <span>转赠编号：</span>
                        <span>{{ this.memderdetailinfo.presenterSeq }}</span>
                    </div>
                </el-col>

                <el-col :span="6" :push="1">
                    <div class="grid-content bg-purple">
                        <span>赠送时间：</span>
                        <span>{{ this.memderdetailinfo.createTime }}</span>
                    </div>
                </el-col>
                <el-col :span="6" :push="1">
                    <div class="grid-content bg-purple">
                        <span>赠送会员姓名：</span>
                        <span>{{ this.memderdetailinfo.userName }}</span>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="6" :push="1">
                    <div class="grid-content bg-purple">
                        <span>赠送会员手机号：</span>
                        <span>{{ this.memderdetailinfo.cellPhoneNo }}</span>
                    </div>
                </el-col>
                <el-col :span="6" :push="1">
                    <div class="grid-content bg-purple">
                        <span>酒红包名称：</span>
                        <span>{{ this.memderdetailinfo.packetName }}</span>
                    </div>
                </el-col>
                <el-col :span="6" :push="1">
                    <div class="grid-content bg-purple">
                        <span>酒红包类型：</span>
                        <span>
                            {{
                            this.memderdetailinfo.type == 1 ? "普通红包" : "拼手气红包"
                            }}
                        </span>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="6" :push="1">
                    <div class="grid-content bg-purple">
                        <span>酒红包金额(ml)：</span>
                        <span>{{ this.memderdetailinfo.amountMace }}</span>
                    </div>
                </el-col>
                <el-col :span="6" :push="1">
                    <div class="grid-content bg-purple">
                        <span>酒红包个数：</span>
                        <span>{{ this.memderdetailinfo.count }}</span>
                    </div>
                </el-col>
                  <el-col :span="6" :push="1">
                    <div class="grid-content bg-purple">
                        <span>赠送状态：</span>
                        <!-- <span>{{ this.memderdetailinfo.count }}</span> -->
                             <span v-if="this.memderdetailinfo.status == 1">赠送中</span>
                        <span v-if="this.memderdetailinfo.status == 2">已完成</span>
                        <span v-if="this.memderdetailinfo.status == 3">已过期</span>
 <span v-if="this.memderdetailinfo.status == 4">已取消</span>

                        
                    </div>
                </el-col>
                <el-col :span="6" :push="1">
                    <div class="grid-content bg-purple"></div>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="6" :push="1">
                    <div class="grid-content bg-purple"></div>
                </el-col>
            </el-row>
        </div>

        <div style="width:100%">
            <span
                style="    font-size: 20px;
    margin: 30px 40px;
    display: inline-block;
      color:#000
"
            >
                <i class="el-icon-document"></i>领取信息
            </span>
            <el-table
                :data="tableData"
                style="width: 100%"
                border
                :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
            >
                <el-table-column prop="userName" label="领取会员名" width="180"></el-table-column>
                <el-table-column prop="cellPhoneNo" label="领取会员手机号" width="180"></el-table-column>
                <el-table-column prop="createTime" label="领取时间"></el-table-column>
                <el-table-column prop="amountMace" label="领取酒红包金额(ml)"></el-table-column>
                <el-table-column prop="packetStatus" label="领取状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.packetStatus == 1">已领取</span>
                        <span v-if="scope.row.packetStatus == 2">待领取</span>
                        <span v-if="scope.row.packetStatus == 3">已退回</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import { receiveRedPacket } from "@/api/memberPrice";
import qs from "qs";
export default {
  data() {
    return {
      memderdetailinfo: {},
      tableData: []
    };
  },
  mounted() {
    this.memderdetailinfo = this.$route.params.v;
    this._getTradeOrderInfo();
  },
  methods: {
    goback() {
      this.$router.go("-1");
    },
    _getTradeOrderInfo() {
      let data = {
        presenterSeq: this.$route.params.v.presenterSeq
      };

      receiveRedPacket(data).then(res => {
        this.tableData = res.records;
      });
    }
  }
};
</script>
<style lang="less" scoped>
.el-row {
    margin-bottom: 40px;
    &:last-child {
        margin-bottom: 0;
    }
}
.el-col {
    border-radius: 4px;
}
.bg-purple-dark {
    //   background: #99a9bf;
}
.bg-purple {
    //   background: #d3dce6;
}
.bg-purple-light {
    //   background: #e5e9f2;
}
.grid-content {
    border-radius: 4px;
    min-height: 36px;
}
.row-bg {
    padding: 10px 0;
    //   background-color: #f9fafc;
}
</style>
